<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 1.给父元素直接加高度 */
      /* 2.给父元素添加overflow:hidden */
      /* 3.在父元素结尾添加空元素，然后让其clear:both */
      /* 4.使用伪类选择器 */
      /* 5.不用 */
      ul {
        /* height: 106px; */
        list-style: none;
        padding: 0;
        margin: 0;
        /* overflow: hidden; */
      }
      /* ul:after {
        content: " ";
        height: 0;
        display: block;
        clear: both;
      } */

      ul li {
        width: 100px;
        height: 100px;
        border: 3px solid #CCC;
        line-height: 100px;
        text-align: center;
        float: left;
      }
      /* 当容器内的所有元素都浮动了以后，父元素高度消失*/
      /* clear: both;清除相邻元素浮动为它带来的影响 */
      ul li :nth-child(4) {
        float: left;
      }
      ul li :first-child {
        float: left;
      }
      div {
        clear: both;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item4</li>
      <div></div>
    </ul>
  </body>
</html>
